<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#menu{/*设置菜单容器div的边框*/
		    width: 100px;
		    border: 1px solid #ccc;
		}
		#menu ul{
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}
		#menu ul li{
		    padding: 12px 0px;
		    background-color: #eee;
		   	border-bottom: 1px solid #ccc;
			text-align: center;
		}
		#menu ul li.last{/*将最后一个列表的下边框取消掉*/
		   	border-bottom: none;
		}
		a:link{
		    color: #000;
		    text-decoration: none;
		}
		a:hover{
		    color: #000;
		}
		#menu2{/*设置菜单容器div的边框*/
		    display: inline-block;
		}
		#menu2 ul{
		    margin: 0;
		    padding: 0;
		    list-style: none;
		    background-color: #eee;
		}
		#menu2 ul li{
		    display: inline;
		    padding: 0 12px;
		   	border-right: 1px solid #ccc;
		    text-align: center;
		    line-height: 36px;	/*不能给inline元素设置高度,要看浏览器显示的高度,再设置line-height水平居中*/
		}
		#menu2 ul li.last{/*将最后一个列表的下边框取消掉*/
		   	border-right: none;
		}
		#pic{/*设置菜单容器自适应*/
		     width: 600px;
		     margin: 20px auto; 
		}
		#pic ul{
		    margin: 0;
		    padding: 0;
		    list-style: none;
		    background-color: #eee;
		}
		#pic ul li{
		    display: inline-block;
			background-color: #fff;
		    margin: 10px 70px;		/* inline-block能设置外边距*/
		    text-align: center;
		}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li>
				<a href="#">菜单项1</a>
			</li>
			<li>
				<a href="#">菜单项2</a>
			</li>
			<li>
				<a href="#">菜单项3</a>
			</li>
			<li class="last">
				<a href="#">菜单项4</a>
			</li>
		</ul>
	</div>
	<br>
	<div id="menu2">
		<ul>
			<li>
				<a href="#">菜单项1</a>
			</li>
			<li>
				<a href="#">菜单项2</a>
			</li>
			<li>
				<a href="#">菜单项3</a>
			</li>
			<li class="last">
				<a href="#">菜单项4</a>
			</li>
		</ul>
	</div>
	<br>
	<div id="pic">
		<ul>
			<li>
				<img src="icon/dianzan.png">
				<p>cup1</p>	
			</li>
			<li>
				<img src="icon/dianzan.png">
				<p>cup2</p>	
			</li>
			<li>
				<img src="icon/dianzan.png">
				<p>cup3</p>	
			</li>
			<li class="last">
				<img src="icon/dianzan.png">
				<p>cup4</p>	
			</li>
			<li>
				<img src="icon/dianzan.png">
				<p>cup5</p>	
			</li>
			<li>
				<img src="icon/dianzan.png">
				<p>cup6</p>	
			</li>
		</ul>
	</div>
</body>
</html>